<template>
  <div>
    <Card shadow>
      <!--      <tree-table expand-key="permissionName" :empty-text="emptyText" :expand-type="false" :selectable="true"-->
      <!--                  :columns="columns" :data="data"-->
      <!--      >-->
      <!--        <template slot="status" slot-scope="scope">-->
      <!--          <Tag :color="getStatus(scope.row.status).color">{{-->
      <!--              getStatus(scope.row.status).value-->
      <!--            }}-->
      <!--          </Tag>-->
      <!--        </template>-->
      <!--        <template slot="handle" slot-scope="scope">-->
      <!--          <Button type="warning" size="small" style="margin-right: 5px">修改</Button>-->
      <!--          <Button type="error" size="small">删除</Button>-->
      <!--        </template>-->
      <!--      </tree-table>-->
      <div style="height: 540px">
        <Split v-model="split1">
          <div slot="left" class="demo-split-pane">
            <Button type="primary" @click="showModal">添加权限</Button>&ensp;
            <Button type="error" @click="handle">批量删除</Button>&ensp;
            <Button type="info">批量导入</Button>&ensp;
            <Button type="success" @click="handle">导出为Csv文件</Button>
            <span style="float: right;clear:both;color: #2d8cf0">
      <i-switch v-model="showDelete" size="large" @on-change="handle"/>
          显示删除用户
      </span>
            <div class="search-con search-con-top">
              <Select v-model="searchKey" class="search-col">
                <Option v-for="item in columns" v-if="item.key !== 'handle' &&item.search!==false" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
              </Select>
              <Input clearable placeholder="输入关键字搜索" class="search-input"/>
              <Button class="search-btn" type="primary">
                <Icon type="search"/>&nbsp;&nbsp;搜索
              </Button>
            </div>
            <Table
              ref="permissionTable"
              :columns="columns"
              :data="data"
              row-key="id"
              highlight-row
              @on-row-click="rowClick"
              stripe
              border
              :loading="loading"
              height="400"
            >

            </Table>
            <div style="text-align: right;margin-top: 10px">
              <Page :total="dataSize"
                    :page-size="pageSize"
                    :current="pageIndex"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="changePage"
                    @on-page-size-change="changeSize"
              />
            </div>
          </div>
          <div slot="right" class="demo-split-pane">
            <h2 style="margin-left:50px ">资源树型对照</h2>
            <!--            <tree-table expand-key="id" :expand-type="false" :selectable="true" :columns="permissionColumns" :data="permissionData"-->

            <!--            >-->
            <!--            </tree-table>-->
            <Button type="primary" @click="handle" style="margin: 5px 0 5px 10px ">添加权限</Button>&ensp;
            <Button type="error" @click="handle" >批量删除</Button>&ensp;
            <Table
              :columns="resourceColumns"
              :data="resourceData"
              highlight-row
              stripe
              border
              row-key="id"
              context-menu
              ref="treeTable"
              show-context-menu
              height="480"
              @on-contextmenu="permissionResourceContextMenu"
            >
              <template slot="contextMenu">
                <DropdownItem @click.native="deletePermissionResource" style="color: #ed4014">删除</DropdownItem>
              </template>

            </Table>
          </div>
        </Split>
      </div>
    </Card>
    <AddPermission ref="showModal" @refresh="getData()"></AddPermission>
  </div>
</template>

<script>
import {
  getPermissionTableData,
  getPermissionTableDataByPageAndSize, getResourceTableDataByPageAndSize,
  getRoleTableData,
  getRoleTableDataByPageAndSize
} from "@/api/data";
import {covertToTreeList} from "@/libs/util";
import {changeGroupData, getStatus} from "@/libs/tools"
import AddPermission from "@/view/admin/system/AddPermission";

export default {
  name: "Permission",
  components:{
    AddPermission
  },
  data() {
    return {
      searchKey:'',
      split1: 0.75,
      loading: true,
      //emptyText: '数据加载中...',
      getStatus: getStatus,
      showDelete: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          search:false
        },
        {
          title: '权限名称',
          key: 'permissionName',
          tooltip: true,
          resizable: true,
          minWidth: 150
          //tree:true,
        },
        {
          title: '权限代码',
          key: 'permissionCode',
          tooltip: true,
          resizable: true,
          minWidth: 90
          //minWidth: '50px'
        },
        {
          title: '描述',
          key: 'description',
          tooltip: true,
          resizable: true,
          minWidth: 150
        },
        {
          title: '创建时间',
          key: 'createTime',
          tooltip: true,
          resizable: true,
          minWidth: 160
        },
        {
          title: '修改时间',
          key: 'updateTime',
          tooltip: true,
          resizable: true,
          minWidth: 160
        },
        {
          title: '状态',
          key: 'status',
          tooltip: true,
          resizable: true,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          },
          //type: 'template',
          //template: 'status',
          minWidth: 90
        },
        {
          title: '操作',
          key: 'handle',
          tooltip: true,
          resizable: true,
          minWidth: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateUser(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: params.row.status&&params.row.status.toUpperCase()==='DELETE'?'warning':'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteUser(params)
                  }
                }
              },  params.row.status&&params.row.status.toUpperCase()==='DELETE'?'恢复':'删除')
            ]);
          }
          //type: 'template',
          //template: 'handle',
          //minWidth: '150px'
        }
      ],
      //allData: [],
      data: [],
      pageSize:10,
      pageIndex:1,
      dataSize:0,
      resourceColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '资源名称',
          key: 'resourceName',
          minWidth: 150,
          resizable: true,
          maxWidth: 300,
          width: 200,
          tree: true
        },
        {
          title: '资源路径',
          key: 'resourceUrl',
          minWidth: 150,
          resizable: true,
          tooltip:true,
          maxWidth: 300,
          width: 200,
          //minWidth: '50px'
        },
        {
          title: '状态',
          key: 'status',
          minWidth: 90,
          resizable: true,
          maxWidth: 200,
          width: 90,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          },
        }
      ],
      resourceData: [],
      timeFun: null
    }
  },
  methods: {
    handle(scope) {
      console.log(scope)
    },
    showModal(){
      this.$refs.showModal.showModal();
    },
    rowClick(params) {
      console.log(params)
      this.resourceData = covertToTreeList(params.resources)
    },
    changePage(page){
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size){
      this.pageSize = size;
      this.getData();
    },
    getData(){
      this.loading = true
      getPermissionTableDataByPageAndSize(this.pageIndex,this.pageSize).then(data => {
        if (data.data.code!==200||!data.data.object.content){
          this.$Message.error(data.data.message);
        }else{
          this.data = data.data.object.content;
          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    },
    addPermissionResource(){

    },
    deletePermissionResource(){

    },
    permissionResourceContextMenu(row){

    },
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>

</style>
